<template>
  <view class="fu-videoWrap">
    <video :src="src" class="fu-video" id="fu-video" :danmu-list="danmuList" :danmu-btn="true" :show-mute-btn="true" :controls="true" enable-danmu danmu-btn autoplay @timeupdate="timeupdate" @play="play" @pause="pause">
        <cover-view class="danmu-write" @click="editDanmu" v-if="isEdit">
          <cover-view class="cuIcon-write"></cover-view>
        </cover-view>
    </video>
    <view class="danmu-write-wrap" :style="{display:isFocus?'block':'none',bottom:inputHeight}">
      <!-- 2020-11-21 测试ios14.2  :adjust-position不生效，官方未做适配-->
      <input
        :adjust-position="false"
        type="text"
        placeholder="发个弹幕,和大家一起聊吧"
        class="danmu-write-input"
        placeholder-class="placeholderColor"
        @focus="focusFn"
        :focus="isFocus"
        @blur="blurFn"
        v-model="content"
        @confirm="send()"
      />
      <view class="danmu-write-btn" :class="{'active':isEmpty}" @click="send">发送</view>
    </view>
  </view>
</template>
<script>
export default {
  props: {
    src: {
      type: String,
      default: ''
    },
    'danmu-list': {
      type: Array,
      default: () => []
    },
    id: {
      type: [String, Number],
      default: 0
    },
    index: {
      type: [String, Number],
      default: 0
    }
  },
  data() {
    return {
      content:'',//输入的弹幕内容
      inputHeight:0, // 输入框距离底部的距离 === 键盘的高度
      isFocus:false,//是否聚焦
      isEmpty:false,//是否输入了文本
      currentTime:0,//视频进度
      videoContext:null,
      isEdit:false,//是否显示发送弹幕按钮
    };
  },
  watch:{
    content(newVal,oldVal){
      if(newVal.trim()){
        this.isEmpty = true;
      }else{
        this.isEmpty = false;
      }
    }
  },
  mounted() {
    uni.onKeyboardHeightChange(res => {
      this.inputHeight = (res.height)+'px';
    })
    this.videoContext = uni.createVideoContext('fu-video')
    console.log(this.videoContext)
  },
  methods: {
    // 播放
    play(e){
      this.isEdit = true;
    },
    // 暂停
    pause(e){
      this.isEdit = false;
    },
    // 播放进度
    timeupdate(e){
      // this.currentTime = Math.floor(e.detail.currentTime);
    },
    editDanmu() {
      this.isFocus = !this.isFocus;
      console.log('发送弹幕',this.isFocus,this.inputHeight);
    },
    focusFn() {

    },
    blurFn(){
      if(!this.isEmpty){
        this.isFocus = false;
        uni.hideKeyboard();
      }
      // this.isBlock = false;
    },
    // 发送弹幕
    send(){
     this.videoContext.sendDanmu({
         text: this.content,
         color: this.getRandomColor()
     });
      this.isFocus = false;
      this.content = '';
    },
    getRandomColor: function() {
        const rgb = [];
        for (let i = 0; i < 3; ++i) {
            let color = Math.floor(Math.random() * 256).toString(16);
            color = color.length == 1 ? '0' + color : color;
            rgb.push(color);
        }
        return '#' + rgb.join('');
    },
    onPageScroll(){
      uni.hideKeyboard();
    },

  }
};
</script>

<style scoped>
.fu-videoWrap .fu-video {
  width: 100%;
  height: 420rpx;
  position: relative;
}
.fu-videoWrap .fu-video .danmu-write {
  position: absolute;
  right: 16rpx;
  top: 50%;
  transform: translateY(-50%);
  font-size: 40rpx;
  color: #ffffff;
  font-weight: bold;
  z-index: 999;
  background-color: red;
}
.fu-videoWrap .danmu-write-wrap {
  display: none;
  transition: all 0.3s ease;
  width: 100%;
  height: 98rpx;
  padding: 12rpx 110rpx 12rpx 20rpx;
  box-sizing: border-box;
  position: absolute;
  bottom: 0;
  left: 0;
  background: #ffffff;
  border-top: 1rpx solid #ebebeb;
  font-size: 28rpx;
  color: #000000;
}
.fu-videoWrap .danmu-write-wrap .placeholderColor {
  color: #aaaaaa;
  font-size: 28rpx;
}
.fu-videoWrap .danmu-write-wrap .danmu-write-input {
  border-radius: 36rpx;
  background: #eeeeee;
  height: 100%;
  padding: 0 24rpx;
}
.fu-videoWrap .danmu-write-wrap .danmu-write-btn {
  position: absolute;
  top: 0;
  right: 20rpx;
  width: 90rpx;
  height: 98rpx;
  line-height: 98rpx;
  text-align: center;
  font-weight: bold;
  color: #b4b4b4;
}
.fu-videoWrap .danmu-write-wrap .danmu-write-btn.active {
  color: #000000;
}
</style>
